Rust Tauri でテキストエディタを作るお @moeki

moeki.icon

code:bash

npm create tauri-app@latest

npm run tauri dev

https://gyazo.com/4851ae808c69f0a13a69c4ef6573252d

code:tree

./

├── README.md

├── index.html

├── package-lock.json

├── package.json

├── public/

│   ├── tauri.svg

│   └── vite.svg

├── src/

│   ├── App.css

│   ├── App.tsx

│   ├── assets/

│   ├── main.tsx

│   └── vite-env.d.ts

├── src-tauri/

│   ├── Cargo.lock

│   ├── Cargo.toml

│   ├── build.rs

│   ├── capabilities/

│   ├── gen/

│   ├── icons/

│   ├── src/

│   └── tauri.conf.json

├── tsconfig.json

├── tsconfig.node.json

└── vite.config.ts

https://gyazo.com/c4fe7a187d4a90a933ad4dc1da82aeb7

まずはカーソルを出現させて動かしてみよう

参考

https://i.gyazo.com/a6f5cea7a214d9dcf5ecad9f42aca43e.gif

モノスペースしか対応できていので調整。

https://i.gyazo.com/36199bfa97a5581b185974493db9eaf9.gif

https://i.gyazo.com/65741adc52f0225584af2a1074715eee.gif

文字挿入

https://i.gyazo.com/a424dfe98da9807548cd8c1ba358b09e.gif

削除

https://i.gyazo.com/7ad8314e65b3d1962d8256c17ff113d2.gif

複数行

code:tsx

import { open } from "@tauri-apps/plugin-dialog";

import { readTextFileLines, BaseDirectory } from "@tauri-apps/plugin-fs";

ファイルのダイアログを開くのは簡単にできるのね

https://i.gyazo.com/4a00f16cf7cb68f1d7dd16d1ed1c1825.gif

https://i.gyazo.com/3cc2bad894da62d25d0e7b843277636b.gif

クリックでフォーカス

地味にムズい

https://i.gyazo.com/2eb63053e3fc186f3750b2754e4530af.gif

変換

隠しinputを使うとうまくできることが分かった